<template>
<div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="权限名称" >
                <AInput v-model:value="state.formData.name"></AInput>
            </AFormItem>
            <AFormItem label="URI" >
                <AInput v-model:value="state.formData.uri"></AInput>
            </AFormItem>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <div style="margin-bottom: 10px;">
            <AButton type="primary"  @click="addPermission">新增</AButton>
        </div>
        <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false"></ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>
    <FormModal v-if="state.modalVisible" :currentData="state.currentData" @ok="modalOk" @cancel="modalCancel"></FormModal>
</template>
<script lang="ts" setup>
import {reactive,h,onMounted} from "vue";
import FormModal from "./components/FormModal/index.vue"
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { PageResult, ResponseVo, CommontTypes } from "@/type";
import { PermissionService } from "@/service";
import { Button, Popconfirm } from "ant-design-vue";
const state = reactive<{
    formData:any,
    pagination:CommontTypes.IPagination,
    modalVisible: boolean,
    dataSource:any[];
    currentData:any
}>({
    formData:{
        name:"",
        uri:""
    },
    pagination:{
        pageNum:1,
        pageSize:10,
        total:0
    },
        modalVisible: false,
        dataSource:[],
        currentData:{}
})

const columns = [
    {title:"权限ID",dataIndex:"id"},
    {title:"权限名称",dataIndex:"name"},
    {title:"描述",dataIndex:"description"},
    {title:"权限URI",dataIndex:"uri"},
    {title:"创建人",customRender:({record}:{record:any})=>{
        return h('div',{},record.creator?`${record.creator}/${record.createTime}`:'-')
    }},
    {title:"修改人",customRender:({record}:{record:any})=>{
        return h('div',{},record.updator?`${record.updator}/${record.updateTime}`:'-')
    }},
    {title:"操作",customRender:({record}:{record:any})=>{
        return h('div',{},[
         h(Button,{type:"text",onClick:()=>editPermission(record)},"编辑"),
        h(Popconfirm,{title:"确认执行此操作",onConfirm:()=>deletePermission(record)},[ h(Button,{type:"text"},"删除")])
        ])
    }}
]


onMounted(()=>{
    handleSearch();
})

const handleSearch = async()=>{
    const res:ResponseVo<PageResult<any>>= await PermissionService.pagePermission({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
    }
}

const deletePermission = async(record)=>{
    const res:ResponseVo<PageResult<any>>= await PermissionService.deletePermission(record.id);
        if(res.code===0){
            state.pagination.pageNum=1;
            message.success("操作成功！")
            handleSearch();
        }
}

const pageChange = (page:number,size:number)=>{
    state.pagination.pageNum = page;
    state.pagination.pageSize = size;
    handleSearch();
}

const handleReset = ()=>{
    state.formData = {};
    state.pagination.pageNum=1;
    state.pagination.total=0;
    handleSearch();
}

const addPermission = ()=>{
    state.currentData = {};
    state.modalVisible = true;
}

const editPermission = (record)=>{
    state.currentData = {...record};
    state.modalVisible = true;
}

const modalOk =()=>{
    state.modalVisible = false;
    state.pagination.pageNum=1;
    handleSearch();
}

const modalCancel = ()=>{
    state.modalVisible = false;
}

</script>